import React, {Component} from "react";
import {Card, Form, Modal, Button} from "antd";
import { Link } from 'react-router'
import PropTypes from "prop-types";
import {BtnsTableVED, EditFormNormal, SearchForm, TableContent} from "../../../widgets/index";
import {HTTP, getDomain, getOrganNo} from "../../../utils";
import {roleList, roleAdd, roleDel} from "../../../utils/api";
import BreadcrumbCustom from "../../../components/BreadcrumbCustom";
import TreeManager from '../appmanager/menumanager/TreeManager'
const FormItem = Form.Item;

export default class extends Component {

    static contextTypes = {
        router: PropTypes.object
    }

    constructor(props) {
        super(props);
        this.table = undefined

        this.state = {
            searchParam: {
                organNo: getOrganNo()
            },
            formVisible: false,
            formReadOnly: false,
            formInitData: {},
            menuLinkVisible: false, //关联菜单
            menuLinkRecord: {}, //　菜单关联id
            menuLinkDefaultCheckedKeys: []
        }
    }

    seaFields = [{
        label: '角色名称',
        key: 'name'
    }]

    seaBtns = [{
        label: '新增',
        onClick: () => this.invokeAdd()
    }]

    columns = [{
        title: '角色名称',
        dataIndex: 'name',
        key: 'name',
    }, {
        title: '关联菜单',
        key: 'linkMenu',
        render: (text, record) => (
            <a onClick={() => this.linkMenu(record)}>关联菜单</a>
        )
    }, {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <BtnsTableVED onView={this.invokeView.bind(this, record)} onEdit={this.invokeEdit.bind(this, record)} onDel={this.invokeDelete.bind(this, record)} />
        ),
    }]

    linkMenu = (record) => {
        this.setState({
            menuLinkRecord: record,
            menuLinkDefaultCheckedKeys: (record['funcTreeRef'] || "").split(",")
        }, () =>{
            this.showMenuManager()
        })

        return false;
    }

    editFields = [{
        label: '角色名称',
        key: 'name',
        required: true,
        requiredMsg: '用户名必填'
    }]



    render() {
        return (
            <div>
                <BreadcrumbCustom first="系统管理" second="角色管理" />
                <Card title="角色管理" bordered={false}>
                    <SearchForm fields={this.seaFields} btns={this.seaBtns} onSearch={this.onSearch}/>
                    <TableContent
                        ref={(e) => {this.table = e}}
                        columns={this.columns}
                        url = {roleList}
                        searchParam={this.state.searchParam}
                    />
                </Card>
                {
                    this.state.formVisible && (
                        <EditFormNormal
                            initData={this.state.formInitData}
                            fields={this.editFields}
                            onClose={() => this.hideForm()}
                            readOnly={this.state.formReadOnly}
                            onSave={this.invokeFormSubmit.bind(this)}
                        />
                    )
                }
                {
                    this.state.menuLinkVisible && (
                        <TreeManager seachParams={{
                            organNo: getOrganNo(),
                            parentId: 0
                        }} defaultCheckedKeys={this.state.menuLinkDefaultCheckedKeys} onCancel={this.hideMenuManager} onSubmit={this.saveMenuLink} />
                    )
                }
            </div>
        )
    }

    showMenuManager = () => {
        this.setState({
            menuLinkVisible: true
        })
    }

    hideMenuManager = () => {
        this.setState({
            menuLinkVisible: false
        })
    }

    saveMenuLink = (values = []) => {
        const record = this.state.menuLinkRecord || {}
        record['funcTreeRef'] = values.join(',');
        this.invokeFormSubmit(record, () => {
            this.hideMenuManager()
        })
    }

    onSearch = (values) => {
        this.setState({
            searchParam: Object.assign({}, this.state.searchParam, values)
        }, () => {
            this.table.loadData()
        })
    }

    invokeAdd = () => {
        this.setState({
            formReadOnly: false
        }, () => {
            this.showForm()
        })
    }

    invokeView = (record) => {
        this.setState({
            formReadOnly: true
        }, () => {
            this.showForm(record)
        })
    }

    invokeEdit = (record) => {
        this.setState({
            formReadOnly: false
        }, () => {
            this.showForm(record)
        })
    }

    invokeDelete = (record) => {
        HTTP.post(roleDel, record, () => {}, (resp) => {
            this.table.loadData()
        })
    }

    showForm = (d) => {
        this.setState({
            formVisible: true,
            formInitData: d || {}
        })
    }

    hideForm = () => {
        this.setState({
            formVisible: false,
            formInitData: {}
        })
    }

    invokeFormSubmit(params, callback) {
        params['organNo'] = getOrganNo()
        HTTP.post(roleAdd, params, () => {}, (resp) => {
            Modal.success({
                title: '提示',
                content: '保存成功'
            })
            this.hideFormSuccess()
            if(callback !== undefined) {
                callback()
            }
        })
        console.log(params)
    }

    hideFormSuccess = () => {
        this.setState({
            formVisible: false,
            formInitData: {}
        }, () => {
            this.table.loadData()
        })
    }
}
